<template>
  <div class="article">
    <!-- 头部区域 -->
    <div class="art-header">
      <div class="left">
        <i class="iconfont iconjiantou2" @click="goBack"></i>
      </div>
      <div class="logo">
        <i class="iconfont iconnew"></i>
      </div>
      <div class="attention">
        <div class="atten-btn has_follow" v-if="hasFollow" @click="userUnfollows">已关注</div>
        <div class="atten-btn no-follow" v-else @click="userFollows">关注</div>
      </div>
    </div>

    <!-- 文章主体区域 -->
    <div class="art-main">
      <!-- 标题区域 -->
      <div class="art-title">
        {{ article.title }}
      </div>

      <!-- 文章信息 -->
      <div class="art-author" v-if="article.user">
        <span class="author-nickname">{{ article.user.nickname }}</span>
        <span class="author-created">{{ article.user.create_date | formatDate }}</span>
      </div>

      <!-- 文章主体内容 -->
      <div class="art-content" v-html="article.content" v-if="article.type === 1">
      </div>

      <div class="vedio" v-if="article.type === 2">
        <video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions">
        </video-player>
      </div>

      <!-- 底部分享 -->
      <div class="art-bottom">
        <div class="bottom-item like" @click="like">
          <i class="iconfont icondianzan" :style="article.has_like ? {'color': '#eb3323'} : {}"></i>
          {{ article.like_length }}
        </div>
        <div class="bottom-item share-wx">
          <i class="iconfont iconweixin"></i>
          微信
        </div>
      </div>
    </div>

    <!-- 跟帖区域 -->
    <div class="art-comment">
      <div class="comment-title">精彩跟帖</div>
      <div class="no-comment" v-if="$store.state.commentList.length === 0">暂无跟帖，抢占沙发</div>

      <div class="comment-box" v-else>
        <!-- 评论模块 -->
        <hm-comment-item v-for="item in filterTwoComment" :key="item.id" :item="item" @reply="showTextarea(arguments)"></hm-comment-item>

        <!-- 更多跟帖按钮 -->
        <div class="more-comment-box" v-if="isShowMoreComment">
          <div class="more-comment-btn" @click="toMoreComment">更多跟帖</div>
        </div>
      </div>
    </div>

    <!-- 底部功能按钮区域 -->
    <div class="art-bottom-bar">
      <div class="input_normal" v-if="!isShowTextarea">
        <!-- 写跟帖 -->
        <div class="bottom-input">
          <input type="text" v-model="myComment" placeholder="写跟帖" @click="showTextarea()">
        </div>
        <!-- 评论数量 -->
        <div class="bottom-comment-btn" @click="toMoreComment">
          <i class="iconfont iconpinglun-"></i>
          <div class="comment-length">{{ article.comment_length }}</div>
        </div>
        <!-- 收藏 -->
        <div class="bottom-star" @click="collect" :style="article.has_star ? {'color': '#eb3323'} : {}">
          <i class="iconfont iconshoucang"></i>
        </div>
        <!-- 分享 -->
        <div class="bottom-share">
          <i class="iconfont iconfenxiang"></i>
        </div>
      </div>
      <!-- 编辑框 -->
      <div class="input_entering" v-else>
        <textarea ref="txt"
                  v-model="commentText"
                  v-focus
                  class="add-comment"
                  cols="30"
                  rows="3"
                  :placeholder="placeholder"
                  @blur="hiddenTextarea">
        </textarea>
        <div class="add-comment-btn" @click="addComment">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'
import HmCommentItem from 'components/hm-comment-item.vue'

import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      id: '',
      article: {},
      myComment: '',
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 类型
          type: '',
          // url地址
          src: ''
        }],
        // 你的封面地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }
      },
      isShowTextarea: false,
      commentText: '',
      parentId: '',
      placeholder: '回复：'
    }
  },

  computed: {
    ...mapGetters([
      'filterTwoComment',
      'isShowMoreComment'
    ]),
    hasFollow () {
      return this.article.has_follow
    }
  },

  components: {
    HmCommentItem,
    videoPlayer
  },

  created () {
    this.id = this.$route.params.id
    this.getArticle()
    this.getComment()
    this.$bus.$on('reply-parent', arg => this.showTextarea(arg))
  },

  methods: {
    /**
     * 网络请求
     */
    // 文章详情
    async getArticle () {
      const { data: res } = await this.$axios.get(`/post/${this.id}`)
      const { data, message, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail(message)
      }
      this.article = data
      this.playerOptions.sources[0].src = data.content
      this.playerOptions.poster = data.cover[0].url
    },

    // 获取跟帖
    async getComment () {
      const { data: res } = await this.$axios.get(`/post_comment/${this.id}`)
      const { data, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail('获取跟帖失败')
      }
      this.$store.commit('getCommentList', data)
    },

    // 关注用户
    async userFollowsNet () {
      const { data: res } = await this.$axios.get(`/user_follows/${this.article.user.id}`)
      const { message, statusCode } = res
      if (statusCode !== 200) {
        this.$toast.fail('关注失败')
        return false
      }
      this.$toast.success(message)
      return true
    },

    // 取消关注用户
    async userUnfollowsNet () {
      const { data: res } = await this.$axios.get(`/user_unfollow/${this.article.user.id}`)
      const { message, statusCode } = res
      if (statusCode !== 200) {
        this.$toast.fail('取消关注失败')
        return true
      }
      this.$toast.success(message)
      return false
    },

    // 点赞文章
    async like () {
      const { data: res } = await this.$axios.get(`/post_like/${this.id}`)
      const { message, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail(message)
      }
      this.getArticle()
      this.$toast.success(message)
    },

    // 收藏文章
    async collect () {
      const { data: res } = await this.$axios.get(`/post_star/${this.id}`)
      console.log(res)
      const { message, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail(message)
      }
      this.$toast.success(message)
      this.article.has_star = !this.article.has_star
    },

    /**
     * 自定义事件
     */
    goBack () {
      this.$router.go(-1)
    },

    // 关注用户
    async userFollows () {
      const statu = await this.userFollowsNet()
      this.article.has_follow = statu
    },

    // 取消关注用户
    async userUnfollows () {
      const statu = await this.userUnfollowsNet()
      this.article.has_follow = statu
    },

    // 去评论页
    toMoreComment () {
      this.$router.push(`/more-comment/${this.id}`)
    },

    // 显示回复框并聚焦
    showTextarea (arg) {
      this.isShowTextarea = true
      if (arg) {
        const parentId = arg[0]
        const nickname = arg[1]
        this.parentId = parentId
        this.placeholder = `回复：@${nickname}`
        // this.$nextTick(() => {
        //   console.log(this.$refs.txt)
        //   // this.$refs.txt.setAttribute('placeholder', `回复：@${nickname}`)
        // })
      }
    },

    // 关闭回复框
    hiddenTextarea () {
      if (this.commentText.trim()) {
        return
      }
      this.isShowTextarea = false
      this.placeholder = '回复：'
    },

    // 添加跟帖
    async addComment () {
      if (this.commentText.trim() === '') {
        return
      }
      this.isShowTextarea = false
      this.placeholder = '回复：'
      const { data: res } = await this.$axios.post(`/post_comment/${this.id}`, {
        content: this.commentText,
        parent_id: this.parentId
      })
      const { statusCode, message } = res
      if (statusCode === 200) {
        this.$toast.success(message)
        this.getComment()
        this.commentText = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  padding-bottom: 60px;
}
.art-header {
  display: flex;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  align-items: center;

  .left {
    margin: 0 8px;
  }

  .logo {
    flex: 1;
    height: 100%;
    i {
      font-size: 50px;
      color: #000;
    }
  }

  .atten-btn {
    width: 62px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 22px;
    &.no-follow {
      background-color: #eb3323;
      color: #fff;
      border-color: #eb3323;
    }
  }
}

.art-main {
  padding: 15px;
  color: #333;
  border-bottom: 5px solid #eee;
  .art-title {
    font-size: 18px;
    font-weight: 700;
  }
  .art-author {
    font-size: 13px;
    color: #868686;
    margin-top: 5px;
    .author-nickname {
      margin-right: 15px;
    }
  }
  .art-content {
    margin: 15px 0 20px;
    font-size: 14px;
    line-height: 30px;
  }

  .vedio {
    margin: 15px 0 20px;
  }
  .art-bottom {
    display: flex;
    justify-content: space-around;
    .bottom-item {
      width: 80px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      border-radius: 15px;
      border: 1px solid #333;
    }
    .iconfont {
      vertical-align: middle;
      margin-right: 5px;
      font-size: 14px;
    }
    .iconweixin {
      color: #5bc43a;
    }
    .icondianzan {
      position: relative;
      top: -2px;
    }
  }
}

.art-comment {
  padding-top: 20px;
  .comment-title {
    text-align: center;
    font-size: 18px;
    color: #333;
  }
  .no-comment {
    padding: 25px 0 40px;
    text-align: center;
    color: #b9b9b9;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }
  .comment-box {
    .comment-item {
      padding: 15px;
      border-bottom: 1px solid #ccc;
      .comment-info {
        display: flex;
        height: 35px;
        margin-bottom: 14px;
        .user-img {
          width: 35px;
          height: 35px;
          margin-right: 10px;
          border-radius: 50%;
        }

        .comment-info-desc {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .comment-user-nickname {
            font-size: 14px;
            color: #000;
          }
          .comment-time {
            font-size: 12px;
            color: #707070;
          }
        }

      }
      .comment-content {
        font-size: 14px;
        color: #333;
        margin-top: 15px;
      }
    }
    .more-comment-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 75px;
      .more-comment-btn {
        width: 120px;
        height: 28px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #666;
        border-radius: 14px;
      }
    }
  }
}

.art-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  .input_normal {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #f7f7f7;
    .bottom-input {
      input {
        width: 180px;
        height: 30px;
        padding-left: 20px;
        background-color: #d7d7d7;
        color: #333;
        line-height: 30px;
        border-radius: 15px;
      }
    }
    i {
      display: block;
      width: 30px;
      height: 30px;
      font-size: 25px;
      line-height: 30px;
    }
    .bottom-comment-btn {
      position: relative;
      .comment-length {
        position: absolute;
        left: 12px;
        top: -3px;
        height: 15px;
        line-height: 15px;
        color: #fff;
        padding: 0 5px;
        background-color: #eb3323;
        border-radius: 8px;
      }
    }
  }
  .input_entering {
    display: flex;
    padding: 10px 20px;
    align-items: flex-end;
    background-color: #fff;
    .add-comment {
      flex: 1;
      margin-right: 20px;
      padding: 10px 20px;
      background-color: #d7d7d7;
      border-radius: 10px;
      font-size: 14px;
    }
    .add-comment-btn {
      width: 60px;
      height: 26px;
      background-color: #eb3323;
      border-radius: 13px;
      text-align: center;
      line-height: 26px;
      color: #fff;
    }
  }
}

</style>

<style lang="scss">
.video-js .vjs-big-play-button {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba($color: #8f949a, $alpha: .6);
  border: 0;
}
</style>
